<template>
  <el-row :gutter="20" class="struct-extract">
    <el-col :span="10" class="col-wrap">
      <MapConfig :columns="headerColumns" class="struct-config" />
    </el-col>
    <el-col :span="14" class="col-wrap">
      <div class="file-content" ref="fileContentRef">
        <div class="table-title">
          <span class="table-title-text">内容预览</span>
          <div class="table-opera">
            <el-button type="primary" size="small" @click="$router.go(-1)"
              >返回</el-button
            >
          </div>
        </div>
        <el-table
          v-loading="loading"
          class="file-table"
          :key="refreshKey"
          :maxHeight="maxHeight"
          :data="tableList"
          :cell-style="{ color: '#333333' }"
          :header-cell-style="{ background: '#F3F4F7', color: '#000000' }"
        >
          <el-table-column
            v-for="c in headerColumns"
            :key="c.key"
            align="center"
            :prop="c.key"
            :label="c.label"
            min-width="200"
            show-overflow-tooltip
            :render-header="renderHeader"
          >
          </el-table-column>
        </el-table>
        <el-pagination
          background
          small
          layout="total, prev, pager, next, sizes, jumper"
          :page-sizes="[10, 20, 30]"
          :total="total"
          :hide-on-single-page="!total"
          :page-size.sync="searchParams.pageSize"
          :pager-count="7"
          :current-page.sync="searchParams.pageNum"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        >
        </el-pagination>
      </div>
    </el-col>
  </el-row>
</template>
<script>
import MapConfig from "./components/MapConfig.vue";
export default {
  name: "StructExtract",
  components: {
    MapConfig,
  },
  data() {
    return {
      // 表格数据加载
      loading: false,
      searchParams: {
        modelId: null, // 数据表
        pageNum: 1, // 页码
        pageSize: 10, // 每页条数
      },
      total: 0, // 数据总条数
      headerColumns: [], // 表头信息
      tableList: [], // 数据列表
      columns: [],
      maxHeight: 0,
      refreshKey: 0,
    };
  },
  created() {
    this.searchParams.modelId = this.$route.query.modelId;
    this.getTableInfo();
  },
  mounted() {
    this.calcMaxHeight();
  },
  methods: {
    getTableInfo() {
      this.loading = true;
      this.$axios
        .get(this.$api.dataConnection.businessData.getTableDataList, {
          params: this.searchParams,
        })
        .then((res) => {
          let resource = res.data.data;
          if (Array.isArray(resource.headerNameList)) {
            this.transHeaders(
              resource.headerNameList,
              resource.commentNameList
            );
            if (Array.isArray(resource.valueList)) {
              this.transTableData(resource.headerNameList, resource.valueList);
              this.total = resource.total;
            } else {
              this.tableList = [];
              this.total = 0;
            }
          } else {
            this.headerColumns = [];
            this.total = 0;
          }
        })
        .catch((err) => {
          console.error(err);
        })
        .finally(() => {
          this.loading = false;
        });
    },
    // 处理表头
    transHeaders(headers, names) {
      let arr = [];
      if (headers.length) {
        for (let i = 0; i < headers.length; i++) {
          arr.push({ key: headers[i], label: names[i] });
        }
      }
      this.headerColumns = arr;
    },
    // 处理数据
    transTableData(headers, data) {
      let arr = [];
      if (data.length) {
        for (let i = 0; i < data.length; i++) {
          let item = {};
          let dataItem = data[i];
          for (let k = 0; k < headers.length; k++) {
            item[headers[k]] = dataItem[k];
          }
          arr.push(item);
        }
      }
      this.tableList = arr;
    },
    // 修改当前页码
    handleCurrentChange(page) {
      this.getTableInfo();
    },
    // 修改每页条数
    handleSizeChange(e) {
      this.getTableInfo();
    },
    renderHeader(h, data) {
      console.log(data);
      return h("span", [
        h(
          "el-tooltip",
          {
            attrs: {
              content: `${data.column.property}(${
                data.column.label || "暂无列名注释"
              })`,
              placement: "top",
            },
          },
          [h("span", data.column.property)]
        ),
      ]);
    },
    calcMaxHeight() {
      this.maxHeight = this.$refs.fileContentRef.clientHeight - 150;
      this.refreshKey++;
    },
  },
};
</script>
<style lang="scss" scoped>
.struct-extract {
  position: relative;
  height: 100%;
  padding-bottom: 24px;
  box-sizing: border-box;
}

.col-wrap {
  height: 100%;
}

.struct-config,
.file-content {
  height: 100%;
  padding: 20px;
  background-color: #fff;
  box-sizing: border-box;
}

.table-title {
  height: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .table-title-text {
    border-left: 5px solid #4b71eb;
    padding-left: 10px;
    font-size: 16px;
    line-height: 16px;
  }

  margin-bottom: 10px;
}

.file-table ::v-deep th.el-table__cell > .cell {
  word-break: keep-all;
  white-space: nowrap;
}

.el-pagination {
  float: right;
  margin-top: 20px;

  .form-input /deep/ .el-input {
    width: 200px;
  }

  /deep/ .el-input__inner {
    height: 22px;
  }
}
</style>
